<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link rel="stylesheet" href="/res/plugin/materialize/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="/res/css/manage/welcome.css">

  <style>

  </style>
</head>
<body>
<header>
  <div class="row">
    <div class="col s6 header-left">
      <div class="hide-on-med-and-down">后台管理系统</div>
    </div>
    <div class="col s6 right-align header-right">
      <div class="hide-on-med-and-down">
        <div></div>
        <div><img src="https://avatars4.githubusercontent.com/u/16890651?v=4&s=460"></div>
        <div></div>
      </div>
      <div>
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only">
          <i class="material-icons">view_headline</i>
        </a>
      </div>
    </div>
  </div>
  <div class="container">


  </div>
  <ul id="nav-mobile" class="side-nav fixed" style="transform: translateX(0%);">
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">关于</a></li>
    <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">开始使用</a></li>
    <li class="no-padding">
      <ul class="collapsible collapsible-accordion">
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">颜色</a></li>
              <li><a href="javscript:;">Grid</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Badges</a></li>
              <li><a href="javscript:;">Buttons</a></li>
            </ul>
          </div>
        </li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">Mobile</a></li>
        <li class="bold"><a href="javscript:;" class="waves-effect waves-teal">展示</a></li>
        <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
          <div class="collapsible-body">
            <ul>
              <li><a href="javscript:;">Carousel</a></li>
              <li><a href="javscript:;">Collapsible</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
  </ul>
</header>
<main>
  <div class="row">
    <div class="col s10 m10 l10">10列全屏大小</div>
    <div class="col s9 m9 l9">6列 (偏移6列)</div>
    <div class="col s12"><span class="flow-text">12列全屏大小</span></div>
    <div class="col s6 offset-l6"><span class="flow-text">6列 (偏移6列)</span></div>
  </div>
</main>

<script src="/res/plugin/jquery/jquery-3.2.1.min.js"></script>
<script src="/res/plugin/materialize/js/materialize.min.js"></script>
<script>
  $(function () {
    $('.button-collapse').sideNav();
    $('#nav-mobile').on('click', 'a', function (e) {
      console.log('11111111');
    })
  })
</script>
</body>
</html>